<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>导航栏练习</title>
        <style type="text/css">
            /* 去掉浏览器默认的样式 */
            *{
                margin: 0px;
                padding: 0px;
            }
           .nav{
                /* 去掉无序列表的样式 */
                list-style: none;
                background-color: blue;
                width: 1000px;
                /* 设置为居中 */
                margin: 50px auto;
                /* 解决高度塌陷问题 */
                overflow: hidden;
               
           }
           .nav li{
                /* 每个列设置为浮动元素 */
                float: left;
                width: 25%;
                text-align: center;
           }

           .nav a{
                /* 去掉超链接的下划线 */
                text-decoration: none;
                /* 字体为白色加粗 */
                color: white;
                font-weight: bold;
                /* 将a标签设置为块元素 */
                display: block;
                width: 100%;
                padding: 5px 0px;
                
           }
           .nav li:hover{
                /* 鼠标悬浮时设置为红色 */
                background-color: red;
           }
        </style>
    </head>
<body>
   <ul class="nav">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">新闻</a>
        </li>
        <li>
            <a href="#">联系</a>
        </li>
        <li>
            <a href="#">关于</a>
        </li>
   </ul>
</body>
</html>